// 导入依赖
import { ajax, isLogin } from '../utils/ajax.js';  // 导入ajax函数和isLogin函数
import '../lib/jquery.js';  // 导入jQuery库
import { nickTest, sexTest, ageTest } from '../utils/reg.js';  // 导入昵称、性别和年龄格式验证函数

// 立即执行函数，用于页面加载时执行一次性操作
(async () => {
    // 判断用户是否已登录
    let { status, user, token } = await isLogin();
    if (status != 1) {  // 如果未登录，弹出提示并跳转至登录页面
        alert('请先登录！');
        location.href = './login.html';
    }
    
    // 将用户的个人数据渲染到表单中
    $('.username').val(user.username);  // 设置用户名输入框的值
    $('.age').val(user.age);  // 设置年龄输入框的值
    $('.gender').val(user.gender);  // 设置性别下拉框的值
    $('.nickname').val(user.nickname);  // 设置昵称输入框的值

    // 当表单提交时
    $('form').on('submit', async function(e) {
        e.preventDefault();  // 阻止表单默认提交行为

        // 获取输入的数据
        var age = $('.age').val().trim();  // 获取年龄输入框的值并去除首尾空格
        var gender = $('.gender').val().trim();  // 获取性别下拉框的值并去除首尾空格
        var nickname = $('.nickname').val().trim();  // 获取昵称输入框的值并去除首尾空格

        // 检查是否有任何一项未填写
        if (age === '') {  // 如果年龄为空
            showMissingFieldAlert('年龄不能为空');  // 显示缺失字段的错误提示框
            return;  // 终止表单提交
        }
        if (gender === '') {  // 如果性别为空
            showMissingFieldAlert('性别不能为空');  // 显示缺失字段的错误提示框
            return;  // 终止表单提交
        }
        if (nickname === '') {  // 如果昵称为空
            showMissingFieldAlert('昵称不能为空');  // 显示缺失字段的错误提示框
            return;  // 终止表单提交
        }

        // 正则校验
        if (!ageTest(age)) {  // 如果年龄格式不符合要求
            showMissingFieldAlert('年龄格式错误');  // 显示格式错误的错误提示框
            return;  // 终止表单提交
        }
        if (!sexTest(gender)) {  // 如果性别格式不符合要求
            showMissingFieldAlert('性别格式错误');  // 显示格式错误的错误提示框
            return;  // 终止表单提交
        }
        if (!nickTest(nickname)) {  // 如果昵称格式不符合要求
            showMissingFieldAlert('昵称格式错误');  // 显示格式错误的错误提示框
            return;  // 终止表单提交
        }

        // 准备要发送到服务器的数据对象
        let data = { id: user.id, age, gender, nickname };  // 构造数据对象

        try {
            // 发送修改用户信息请求
            let { data: { code } } = await ajax.post('/users/update', data, { headers: { authorization: token } });

            if (code != 1)  // 如果返回的状态码不为1
                return alert('修改失败');  // 显示修改失败的提示框

            alert('修改成功');  // 修改成功，弹出成功提示框
        } catch (error) {
            console.error('修改用户信息失败:', error);  // 打印修改用户信息失败的错误信息
            showMissingFieldAlert('修改失败，请稍后再试。');  // 显示修改失败的错误提示框
        }
    });

    // 显示缺失字段的错误提示框的函数
    function showMissingFieldAlert(message) {
        var alertDiv = $('<div></div>')  // 创建一个div元素作为错误提示框
            .text(message)  // 设置错误提示框的文本内容
            .addClass('error-alert')  // 添加error-alert类，设置样式
            .css({
                'position': 'fixed',
                'top': '50%',
                'left': '50%',
                'transform': 'translate(-50%, -50%)',
                'background-color': 'rgba(0, 0, 0, 0.6)',  // 半透明黑色背景
                'color': 'white',
                'padding': '10px 20px',
                'border-radius': '5px',
                'z-index': '1000',
                'text-align': 'center',
                'font-size': '16px'
            })
            .appendTo('body');  // 添加到body元素中

        setTimeout(function() {
            alertDiv.fadeOut(500, function() {
                $(this).remove();  // 2秒后自动消失并移除错误提示框
            });
        }, 2000); // 设置2秒后自动消失
    }
})();
